<template>
    <div>
        <div class="main_operation">
            <div class="operation_left">
                <a-button v-if="routerShow($route,'alarmGroup_add')" class="mr10" type="primary" @click="addBtn">添加</a-button>
                <!-- <a-button class="mr10" type="danger">批量删除</a-button> -->
            </div>
            <div class="operation_right">
                <a-input-group style="width:500px;" compact>
                    <a-select style="width:30%;" v-model="inputType">
                        <a-select-option :value="1">分组名称</a-select-option>
                        <a-select-option :value="2">单位名称</a-select-option>
                    </a-select>
                    <a-input-search style="width:70%;" @search="onSearch" :placeholder="isInputType" enterButton="查询" />
                </a-input-group>
            </div>
        </div>
        <div class="main">
            <!-- :rowSelection="{ fixed: true, selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" -->
            <a-table :pagination="false" :loading="tableLoad" :columns="Fields" :dataSource="dataLists.data" :rowKey="record => record.id" :scroll="{x: 1000, y: 500 }">
                <template slot="action" slot-scope="text, record">
                    <a-button v-if="routerShow($route,'alarmGroup_update')" size="small" class="mr5" type="primary" @click="editBtn(record)">编辑</a-button>
                    <a-button v-if="routerShow($route,'alarmGroup_delete')" size="small" type="danger" @click="delBtn(record)">删除</a-button>
                </template>
            </a-table>
            <div class="pageBox">
                <a-pagination :total="dataLists.total" :showTotal="total => `共 ${total} 条数据`" :pageSize="dataLists.per_page" :defaultCurrent="1" @change="pageChange" />
            </div>
        </div>
        <!-- 添加编辑 -->
        <a-modal :maskClosable="false" :destroyOnClose="true" :title="titleModel" :width="600" v-model="visible" :confirmLoading="confirmLoading" @ok="handleOk" @cancel="handleCancel">
            <a-form>
                <a-form-item required label="分组名称:" :label-col="{ md: 5 ,xs: 24 }" :wrapper-col="{ md: 18 ,xs: 24 }">
                    <a-input v-model="formItem.name" placeholder="请输入分组名称" />
                </a-form-item>

                <!-- <a-form-item required label="联系人类型:" :label-col="{ md: 5,xs:24 }" :wrapper-col="{ md: 18,xs:24 }">
                    <a-radio-group :options="plainOptions" v-model="userType" @change="onChange" />
                </a-form-item> -->

                <a-form-item required :label="isType" v-if="userType = 1" :label-col="{ md: 5,xs:24 }" :wrapper-col="{ md: 18,xs:24 }">
                    <a-select v-model="formItem.company" @change="groupChange" allowClear :placeholder="`请选择账号${isType}`">
                        <a-select-option v-for="item in selectData" :value="item.id" :key="item.id">{{item.name}}</a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item v-show="formItem.company" label="联系人帐户名:" :label-col="{ md: 5 ,xs: 24 }" :wrapper-col="{ md: 18 ,xs: 24 }">
                    <a-select mode="multiple" v-model="fullName" @change="fullNameChange" placeholder="请选择联系人帐户名">
                        <a-select-option v-for="item in alarmAllData" :value="item.id" :key="item.id">{{item.username}}</a-select-option>
                    </a-select>
                </a-form-item>
            </a-form>
        </a-modal>
    </div>
</template>

<script>
import {
  mapState,
  mapActions,
} from 'vuex';

const plainOptions = [{
  label: '平台',
  value: 1,
},
{
  label: '代理',
  value: 2,
},
{
  label: '公司',
  value: 3,
},
];
export default {
  name: 'Single',
  data() {
    return {
      plainOptions,
      userType: 1,
      inputType: 1,
      /* 通用模块 */
      // 列表
      tableLoad: false, // 列表loading状态
      formList: { // 列表信息
        page: 1,
      },
      selectedRowKeys: [], // 勾选的id
      /* 通用模块end */

      /* 添加编辑 */
      titleModel: '', // 标题
      visible: false, // 窗口显示隐藏
      confirmLoading: false, // 按钮loading状态
      formItem: {
        name: '',
        company: undefined,
        full_name: '',
      },
      fullName: [],
      /* 添加编辑end */
      // 分组
      groupId: [],
    };
  },
  computed: {
    ...mapState({
      Fields: state => state.alertContactsGroup.Fields,
      dataLists: state => state.alertContactsGroup.dataLists,
      requestCode: state => state.alertContactsGroup.requestCode,
      groupData: state => state.group.groupData,
      alarmAllData: state => state.alertContacts.alarmAllData,
      agentAllData: state => state.group.agentAllData, // 代理all信息
      companyAllData: state => state.group.companyAllData, // 公司all信息
    }),
    isInputType() {
      if (this.inputType == 1) {
        return '请输入分组名称';
      }
      if (this.inputType == 2) {
        return '请输入单位名称';
      }
    },
    isType() {
      if (this.userType == 1) {
        // this.selectData = this.userPlatformAll
        this.selectData = this.companyAllData;
        return '所属公司';
        // return '所属平台';
        // this.alarmAll();
      }
    //   if (this.userType == 2) {
    //     this.selectData = this.agentAllData;
    //     return '所属代理';
    //   }
    //   if (this.userType == 3) {
    //     this.selectData = this.companyAllData;
    //     return '所属公司';
    //   }
    },
  },
  mounted() {
    // this.alarmAll(false);
    // this.groupAll()
    this.changeData();
    this.agentAll(); // 代理all信息
    this.companyAll(); // 公司all信息
  },
  methods: {
    onChange(e) {
      console.log(e);
      this.formItem.company = undefined;
      this.fullName = [];
    //   e.target.value === 1 ? this.alarmAll() : this.alarmAll(false);
    },
    /* 通用模块 */
    /* 接口 */
    ...mapActions({
      getLists: 'alertContactsGroup/getLists', // 列表
      dataAdd: 'alertContactsGroup/dataAdd', // 添加
      dataEdit: 'alertContactsGroup/dataEdit', // 编辑
      dataDel: 'alertContactsGroup/dataDel', // 删除
      groupAll: 'group/groupAll', // 公司分组信息
      alarmAll: 'alertContacts/alarmAll', // 报警联系人所有信息
      agentAll: 'group/agentAll', // 代理all信息
      companyAll: 'group/companyAll', // 公司all信息
    }),

    // 勾选
    onSelectChange(selectedRowKeys) {
      console.log('selectedRowKeys changed: ', selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
    },
    // 重新获取列表数据
    changeData() {
      this.tableLoad = true;
      setTimeout(() => {
        this.getLists(this.formList);
        this.tableLoad = false;
      }, 800);
    },
    // 搜索
    onSearch(val) {
      console.log(val);
      if (this.inputType == '1') {
        this.formList = { // 列表信息
          name: val,
          page: 1,
        };
      } else if (this.inputType == '2') {
        this.formList = { // 列表信息
          company: val,
          page: 1,
        };
      } else {
        this.formList = { // 列表信息
          company: val,
          page: 1,
        };
      }
      this.changeData();
    },
    // 页码
    pageChange(page) {
      this.formList.page = page;
      this.getLists(this.formList);
    },
    /* 通用模块end */

    /* 添加编辑 */
    // 添加
    addBtn() {
      this.titleModel = '添加报警联系人';
      this.formItem = {
        name: '',
        company: undefined,
        full_name: '',
      };
      this.userType = 1;
      //   this.alarmAll();
      this.fullName = [];
      this.visible = true;
    },
    // 数组反序
    isReverse(val) {
      return val.reverse();
    },
    // 编辑
    editBtn(item) {
      console.log(item);
      this.titleModel = '编辑报警联系人';
      this.groupId = [];
      this.fullName = [];
      this.formItem.id = item.id;
      this.formItem.name = item.name;
      this.formItem.company = item.company;
      this.formItem.full_name = item.full_name;
      if (item.company_arr[0] == null) {
        // 平台
        this.userType = 1;
        this.alarmAll();
      } else {
        this.userType = item.company_arr.length;
        this.alarmAll({
          company: item.company,
        });
      }
      if (item.full_name != null) {
        let arr = item.full_name.split(',');
        arr = arr.map(Number);
        this.fullName = arr;
      }
      this.visible = true;
    },
    // 窗口确定
    handleOk() {
      this.confirmLoading = true;
      console.log(this.formItem);
      this.formItem.full_name;
      if (this.titleModel == '添加报警联系人') {
        this.formList.page = 1,
        this.dataAdd(this.formItem);
      } else {
        this.dataEdit(this.formItem);
      }
      setTimeout(() => {
        if (this.requestCode === 0) {
          this.visible = false;
          this.changeData();
        }
        this.confirmLoading = false;
      }, 1000);
    },
    // 窗口取消
    handleCancel() {
      this.fullName = [];
      this.visible = false;
    },
    /* 添加编辑end */
    // 联系人选择
    fullNameChange(val) {
      console.log(val);
      this.formItem.full_name = val.join(',');


      //   value;
    },
    /* 删除 */
    delBtn(item) {
      const _this = this;
      this.$confirm({
        title: `您确定要删除 ${item.name} 吗?`,
        content: '删除后将不可恢复,请仔细核对!',
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        onOk() {
          _this.dataDel(item.id);
          _this.changeData();
        },
      });
    },
    // 分组选择
    groupChange(value) {
      // console.log(value);
      this.fullName = [];
      if (typeof value != 'undefined') {
        this.alarmAll({
          company: value,
        });
      }
    },
  },
};
</script>

<style></style>
